
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ALM PASS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <style>

	body, html {
		margin: 0;
		padding: 0;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
		padding: 0;
		margin: 0;
	}
	body, input, textarea {
		font-family: '微软雅黑','Helvetica Neue',sans-serif,SimHei;
		-webkit-font-smoothing: antialiased;
	}
	.first.page-background {
		background-image: url(img/background.gif) no-repeat;
	}
	#fullpage>.section>.tableCell {
		min-width: 470px;
	}
	.tableCell {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}
	#top-menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 90px;
		background: #FFF;
		z-index: 999;
	}
	#top-menu .logo {
		padding: 12px 0;
		display: inline-block;
		float: left;
	}
	#top-menu form .wrapper {
		position: absolute;
		top: 30px;
		left: 255px;
	}
	#top-menu input.search {
		width: 160px;
		height: 30px;
		webkit-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-o-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
		margin: 0;
		padding: 5px 35px 5px 5px;
		font-size: 16px;
		background-color: #FFF;
		border: 1px solid rgba(0,0,0,.15);
		outline: 0;
		color: rgba(0,0,0,.7);
		border-radius: .3125em;
		-webkit-tap-highlight-color: rgba(255,255,255,0);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	#top-menu input.search~i.search.icon {
		position: absolute;
		top: 0;
		right: 0;
		background: url(img/search.gif) no-repeat;
		width: 30px;
		height: 30px;
		background-size: 22px;
		background-position: 0;
	}
	#top-menu .public-pages {
		display: inline-block;
		height: 100%;
		line-height: 90px;
		margin-left: 210px;
	}
	ol, ul {
		list-style: none;
	}
	#top-menu .public-pages li {
		float: left;
		margin: 0 8px;
		line-height: 90px;
	}
	li {
		display: list-item;
		text-align: -webkit-match-parent;
	}
	#top-menu .public-pages li a {
		text-decoration: none;
		color: #000;
		font-weight: 700;
	}
	#top-menu .login {
		float: right;
		display: inline-block;
		font-weight: 700;
		margin: 29px 30px auto auto;
		padding: 0 30px;
		height: 34px;
		line-height: 34px;
	}
	.green.button {
		color: #FFF;
		background: #32be77;
	}
	a.button {
		text-decoration: none;
	}
	.button {
		display: inline-block;
		font-size: 16px;
		padding: 0 1.5em;
		text-transform: none;
		line-height: 30px;
		height: 30px;
		color: #FFF;
		background-image: none;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		-ms-border-radius: 2em;
		-o-border-radius: 2em;
		border-radius: 2em;
		outline: 0;
		cursor: pointer;
	}
	user agent stylesheeta:-webkit-any-link {
		color: -webkit-link;
		text-decoration: underline;
		cursor: auto;
	}
	.page-background-image {
		#background: rgba(0,0,0,.5);
	}
	#background-video, .page-background-image {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		#background: #000;
	}
	.section.table, .slide.table {
		display: table;
		width: 100%;
	}
	.section {
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.description-wrapper {
		display: table;
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
		font-size: 54.79%;
	}
	#video-description {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
		color: #FFF;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
	}
	#video-description .words {
		position: absolute;
		width: 100%;
	}
	#video-description h1 {
		font-size: 72px;
		font-weight: 700;
		margin: 35px auto;
		position: absolute;
		width: 100%;
		top: -60px;
	}
	#video-description h2 {
		font-size: 24px;
		position: absolute;
		width: 100%;
		top: 85px;
	}
	#video-description .play {
		display: inline-block;
		line-height: 59px;
		cursor: pointer;
		width: 110px;
		height: 110px;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		border: 2px #fff solid;
		background-color: transparent;
		outline: 0;
		-webkit-transition: .4s;
		-moz-transition: .4s;
		-ms-transition: .4s;
		-o-transition: .4s;
		transition: .4s;
		position: relative;
		margin-top: 180px;
	}
	#video-description .play-triangle {
		width: 0;
		height: 0;
		border-top: 16px solid transparent;
		border-bottom: 16px solid transparent;
		border-left: 25px solid #FFF;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -9px;
		margin-top: -15px;
	}
	#video-description .has-no-video {
		margin-top: 180px;
	}
	form.register-form {
		position: absolute;
		display: block;
		width: 100%;
	}
	form.register-form>.wrapper {
		position: relative;
		width: 100%;
	}
	form.register-form>.wrapper>.register {
		position: relative;
		display: table;
		background: rgba(0,0,0,.5);
		padding: 25px;
		border-radius: 10px;
		margin: 70px auto 0;
	}
	form.register-form .input-wrapper {
		display: table-cell;
		float: left;
		background: #FFF;
		margin-right: 10px;
		padding: 10px;
		border-radius: 3px;
		height: 26px;
		cursor: text;
	}

	form.register-form .prefix {
		color: #666;
		background: #EEE;
		display: inline-block;
		padding: 4px 6px;
		border-radius: 3px;
		height: 18px;
	}
	form.register-form .input-wrapper input {
		height: 23px;
		font-size: 16px;
		border: 1px solid #FFF;
		width: 180px;
		outline: 0;
	}
	form.register-form .input-wrapper.gkey input {
		width: 180px;
	}	
	form.register-form .button-wrapper {
		display: table-cell;
		vertical-align: top;
	}
	form.register-form .register.button {
		float: right;
		height: 46px;
		border-radius: 3px;
		background: #f75288;
		border: 0;
		font-size: 18px;
	}
	.loading, .loading-container {
		height: 30px;
		position: relative;
		width: 30px;
		border-radius: 100%;
	}
	.loading-container {
		margin: 7px auto;
		display: none;
	}
	.section-inner {
		display: table;
		width: 100%;
		height: 100%;
	}
	.left-section, .right-section {
	display: table-cell;
		height: 100%;
		width: 50%;
		text-align: center;
		vertical-align: middle;
	}
	.left-section, .right-section {
		display: table-cell;
		height: 100%;
		width: 50%;
		text-align: center;
		vertical-align: middle;
	}
	.circle-wrapper {
		width: 680px;
		height: 680px;
		margin: auto;
		position: relative;
	}
	.blue.doted-circle {
		border-color: #6dabd6;
	}
	.left-section .doted-circle, .left-section .filled-circle {
		margin-left: 10%;
	}
	.doted-circle.circling {
		-webkit-animation: rotate-infinity 16s linear infinite;
		-moz-animation: rotate-infinity 16s linear infinite;
		-ms-animation: rotate-infinity 16s linear infinite;
		animation: rotate-infinity 16s linear infinite;
	}
	.doted-circle {
		width: 100%;
		height: 100%;
		border: 2px dashed #CCC;
	}
	.doted-circle, .filled-circle {
		position: absolute;
		border-radius: 50%;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding;
		background-clip: padding-box;
	}
	.right-section .article-wrapper {
		margin: 0 15%;
	}
	.article-wrapper {
		text-align: left;
	}
	.article-wrapper h1 {
		margin-bottom: 40px;
		font-size: 60px;
		font-weight: 700;
	}
	.slideRightRetourn {
		-webkit-animation-name: slideRightRetourn;
		-moz-animation-name: slideRightRetourn;
		-ms-animation-name: slideRightRetourn;
		-o-animation-name: slideRightRetourn;
		animation-name: slideRightRetourn;
	}
	.magictime {
		-webkit-animation-duration: 1s;
		-moz-animation-duration: 1s;
		-ms-animation-duration: 1s;
		-o-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		-moz-animation-fill-mode: both;
		-ms-animation-fill-mode: both;
		-o-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.article-wrapper p.show {
		opacity: 1;
		word-break: break-all;
	}
	.article-wrapper p {
		font-size: 30px;
		line-height: 50px;
		#opacity: 0;
		-webkit-transition: all 1s ease-in;
		-moz-transition: all 1s ease-in;
		-ms-transition: all 1s ease-in;
		-o-transition: all 1s ease-in;
		transition: all 1s ease-in;
	}
	.article-wrapper ul.screenshot {
		padding-top: 20px;
	}
	.article-wrapper ul.screenshot li {
		float: left;
		margin: 10px 10px 0 0;
		padding: 3px;
		border: 1px solid #CCC;
		border-radius: 3px;
		background: #FFF;
	}
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>

<div id="fullpage" style="height: 100%; position: relative; top: 0px;">
	<div class="section first page-background table active" style="height: 780px; background-color: rgb(255, 255, 255);"><div class="tableCell" style="height: 780px">
		<div id="top-menu">
			<a class="logo" href="/">
				<img src="img/logo.gif">
			</a>
			<form method="GET" action="https://coding.net/search">
				<div class="wrapper">
					<input type="text" class="search" name="q" placeholder="Search...">
					<i class="search icon"></i>
				</div>
			</form>
			<ul class="public-pages">
				<li><a href="/team">团队</a></li>
				<li><a href="/project">项目</a></li>
				<li><a href="/crowdsouring">众包</a></li>
				<li><a href="/services">服务</a></li>
				<li><a href="/help">帮助</a></li>
				<li><a href="/feedback">反馈</a></li>
			</ul>
		<a class="login green button" href="/login">登录</a></div>
		<div id="background-video"><video id="video_background" preload="auto" autoplay="autoplay" loop="loop" style="position: absolute; top: -224px; left: 0px; bottom: 0px; right: 0px; z-index: -100; width: 1600px; height: 900px;"><source src="https://dn-coding-net-public-file.qbox.me/coding-bg.webm" type="video/webm"><source src="https://dn-coding-net-public-file.qbox.me/coding-bg.mp4" type="video/mp4"><source src="https://dn-coding-net-public-file.qbox.me/coding-bg.ogg" type="video/ogg">bgvideo</video></div>
		<div class="page-background-image"></div>
		<div class="description-wrapper">
			<div id="video-description">
				<div class="words">
					<h1>云端协作<span style="opacity: 0">，</span>开启未来</h1>
					<h2>Coding 让开发更简单 · 无需搭建环境 · 一键测试部署</h2>
				</div>
				<a href="javascript:void(0);" class="play has-no-video">
					<span class="play-triangle"></span>
				</a>
				<!-- <div class="has-no-video"></div> -->
				<form method="POST" class="register-form">
					<div class="wrapper">
						<div class="register">
							<div class="input-wrapper gkey">
								<input type="text" name="user_id" placeholder="用户名">
							</div>
							<div class="input-wrapper email">
								<input type="password" name="user_pass" placeholder="密码">
							</div>
							<div class="button-wrapper">
								<button type="submit" class="red register button" style="width: 166px">
									<span>登录</span>
									<div class="loading-container">
										<div class="loading monkey"></div>
										<div id="loading-text"><img src="/static/ccda742894ab2799ab032a9ae14a66d9.png" width="20" height="20">
										</div>
									</div>
								</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div></div>
	<div class="section table" style="height: 452px; background-color: rgb(247, 246, 242);"><div class="tableCell" style="height: 452px;">
		<div class="section-inner">
			<div class="left-section">
				<div class="circle-wrapper">
					<div class="blue doted-circle">
					</div>
					<div class="blue filled-circle">
						<div class="table-wrapper frame-2-2 hidden">
							<div class="word-wrapper swashIn">
								<img src="/static/c6e91970cd4ed6d3d75f1ba027a51480.png" alt="" class="part-1">
								<h2>项目协作</h2>
							</div>
						</div>
						<div class="table-wrapper frame-2-3 hidden">
							<div class="word-wrapper openDownRightOut">
								<img src="/static/87f1baf73a3130d273c36cd2f1e7b452.png" alt="" class="part-1">
								<h2>代码托管</h2>
							</div>
						</div>
						<div class="table-wrapper frame-2-4 hidden">
							<div class="word-wrapper openUpLeftOut">
								<img src="/static/eb783668c50d9fb69f1559470264c0e3.png" alt="" class="part-1">
								<h2>运行空间<br>(Paas)</h2>

							</div>
						</div>
						<div class="table-wrapper frame-2-5 hidden">
							<div class="word-wrapper swashOut">
								<img src="/static/15fc474671ffd6f88773924b97610634.png" alt="" class="part-1">
								<h2 style="height: auto; margin-top: 40px;">质量控制</h2>
							</div>
						</div>
						<div class="table-wrapper frame-2-6 hidden">
							<img src="/static/4579875e7d66b84fa4e96119356cb034.png" alt="" class="part-1">
							<img src="/static/b0e596561669088619b6adfb4a20e1dd.png" alt="" class="part-2">
							<img src="/static/08b1573ac84744faa5e963059b1d18d1.png" alt="" class="part-3">
							<img src="/static/d657cd3da45603b60b2c578a8095031f.png" alt="" class="part-4">
							<img src="/static/7d2ba4136e2368c09ea0879107f89189.png" alt="" class="part-5">
							<div class="word-wrapper">
								<img src="/static/eb783668c50d9fb69f1559470264c0e3.png" class="frame-2-6-2 magictime swashIn" style="display: inline;">
								<img src="/static/9383ecf417be779e10905fe3521118af.png" class="frame-2-6-1" style="opacity: 0; top: 20%; display: none;">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-section">
				<div class="article-wrapper frame-2">
					<h1 class="" style="opacity: 1;">云端开发方式</h1>
					<p class="">
						以云计算技术为基础，Coding 提供：<br>
						项目协作、代码托管、运行空间（PaaS）、质量控制等功能；<br>
						环境搭建、测试部署，全部交给云端完成，您只负责安心编程。<br>
					</p>
					<ul class="screenshot">
						<li data-position="left middle">
							<a href="/static/7d28569c02cd0f441493a87fbb4d3be3.png" title="个人空间">
								<img src="/static/f4859a9a4e9d61edef380408dac3f608.jpg" alt="">
							</a>
						</li>
						<li data-position="left middle">
							<a href="/static/ad02eadc3feeba23624bf937bd830d26.png" title="代码托管">
								<img src="/static/93f5112a6711050367f0a8d3ec5d43dd.jpg" alt="">
							</a>
						</li>
						<li data-position="left middle">
							<a href="/static/ba31d17357475c203b9ccb9d5d4cce99.png" title="项目网络">
								<img src="/static/42364a07da64543dc005afec67ba2241.jpg" alt="">
							</a>
						</li>
						<li data-position="left middle">
							<a href="/static/592bb50454dfefc558e94a720d5222d1.png" title="运行空间(PaaS)">
								<img src="/static/72c0defd25bfa0ff73433f81c260f78f.jpg" alt="">
							</a>
						</li>
						<li data-position="left middle">
							<a href="/static/4b32b7fc6f09f29cc9d156254bf01052.png" title="质量控制">
								<img src="/static/b8d2f6f27c1d0f624097d9fe7a27b647.jpg" alt="">
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div></div>
	<div class="section table" style="height: 452px; background-color: rgb(255, 255, 255);"><div class="tableCell" style="height: 452px;">
		<div class="section-inner">
			<div class="left-section">
				<div class="article-wrapper frame-3">
					<h1 class="" style="opacity: 1;">轻量级社交互动元素</h1>
					<p class="">
						私信留言、冒泡互动、结交好友；<br>
						在 Coding 上遇到你的道中人！
					</p>
					<ul class="screenshot">
						<li data-position="right middle">
							<a href="/static/11519b1a26d166588a893a54e58f7582.png" title="私信留言">
								<img src="/static/d3bbdc6f68d520078bb7fdb0ee775480.jpg" alt="">
							</a>
						</li>
						<li data-position="right middle">
							<a href="/static/2d41460f2b40484e66bd15720d2bb074.png" title="冒泡互动">
								<img src="/static/c36737ce768578eb7648722f4df6b827.jpg" alt="">
							</a>
						</li>
						<li data-position="right middle">
							<a href="/static/9c66fb5d67cd2e0a980b6d2c72becd00.png" title="结交好友">
								<img src="/static/ec11156ae1a15992a4015932021d7293.jpg" alt="">
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="right-section">
				<div class="circle-wrapper">
					<div class="red doted-circle">
					</div>
					<div class="red filled-circle">
						<img src="/static/4282e17f31acb10d9cd8257a7043d93f.png" alt="" class="frame-3 part-1">
						<img src="/static/a8d7303b7bb154a491e16a53c542e03f.png" alt="" class="frame-3 part-2">
						<img src="/static/67bf9b845b9d31526fab1c62ca20bd3d.png" alt="" class="frame-3 part-3">
					</div>
				</div>
			</div>
		</div>
	</div></div>
	<div class="section table" style="height: 452px; background-color: rgb(247, 246, 242);"><div class="tableCell" style="height: 452px;">
		<div class="section-inner">
			<div class="left-section">
				<div class="circle-wrapper">
					<div class="green doted-circle">
					</div>
					<div class="green filled-circle">
						<div class="table-wrapper frame-4-1">
							<div class="word-wrapper">
								<img src="/static/73a94c4ea3237eeede8f71c4ba5a5182.png" alt="" class="frame-4 part-1">
								<h2>组建团队</h2>
							</div>
						</div>
						<div class="table-wrapper frame-4-2 hidden">
							<div class="word-wrapper">
								<img src="/static/b6ecb8a398126583b819792be9d76319.png" alt="" class="frame-4 part-2">
								<h2>代码管理</h2>
							</div>
						</div>
						<div class="table-wrapper frame-4-3 hidden">
							<div class="word-wrapper">
								<img src="/static/d58ee14838b8256f5c387ff73a52a10c.png" alt="" class="frame-4 part-3">
								<h2>文档共享</h2>
							</div>
						</div>
						<div class="table-wrapper frame-4-4 hidden">
							<div class="word-wrapper">
								<img src="/static/2dfd30d85fededfbbdccc8b2a5cef63a.png" alt="" class="frame-4 part-4">
								<h2>项目讨论</h2>
							</div>
						</div>
						<div class="table-wrapper frame-4-5 hidden">
							<div class="word-wrapper"><img src="/static/a86529d4f2861f3e69b9daaab3a55eb9.png" alt="" class="frame-4 part-5"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-section">
				<div class="article-wrapper frame-4">
					<h1>项目协作工具</h1>
					<p>
						组建团队，代码管理，文档共享，项目讨论；<br>
						Coding 为你统一管理
					</p>
					<ul class="screenshot">
						<li data-position="right middle">
							<a href="/static/87026eddfd626359e7d91a745afcd5fa.png" title="项目成员">
								<img src="/static/333ee33b07646f15ab1bcdf3d35dd5b8.jpg" alt="">
							</a>
						</li>
						<li data-position="right middle">
							<a href="/static/ad02eadc3feeba23624bf937bd830d26.png" title="代码管理">
								<img src="/static/93f5112a6711050367f0a8d3ec5d43dd.jpg" alt="">
							</a>
						</li>
						<li data-position="right middle">
							<a href="/static/de866f6689ade7fe24ee46db0f6b9275.png" title="文档共享">
								<img src="/static/bc946170edac1c74345e251e605ac454.jpg" alt="">
							</a>
						</li>
						<li data-position="right middle">
							<a href="/static/a4f8f76943c8994f0c2b6e4b549dfa15.png" title="项目讨论">
								<img src="/static/59953a2536102f0deb6506c99a3e338c.jpg" alt="">
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div></div>
	<div class="section table" style="height: 452px; background-color: rgb(255, 255, 255);"><div class="tableCell" style="height: 452px;">
		<div class="section-inner">
			<div class="left-section">
				<div class="article-wrapper frame-5">
					<h1>最贴心、高品质的开发平台</h1>
					<p>
						免费注册，一键开启 Coding 之旅；<br>
						我们着眼细节，追求品质；<br>
						期待打造极致云端体验！
					</p>
					<ul class="screenshot">
						<li data-position="left middle">
							<a href="/static/abe5d3d3bc44cd696629886e705509f4.png" title="登录">
								<img src="/static/396eda633bbe59c29add57a8bc52a427.jpg" alt="">
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="right-section">
				<div class="circle-wrapper">
					<div class="yellow doted-circle circling">
					</div>
					<div class="yellow filled-circle">
						<div class="table-wrapper frame-5-1">
							<div class="word-wrapper">
								<img src="/static/1afc1e8e74b59c1c7a361d9cb9c9a79e.png" alt="" class="frame-5 part-1">
								<img src="/static/ab4651ab08c0fa2142e8eae284ac5709.png" alt="" class="frame-5 part-2">
							</div>
						</div>
						<div class="table-wrapper frame-5-2 hidden">
							<div class="word-wrapper"><img src="/static/b7f9500acd9eb69d1599518bea9edb72.png" alt="" class="frame-5 part-3"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div></div>
	<div class="section footer table" style="height: 52px; background-color: rgb(0, 0, 0);"><div class="tableCell" style="height: 52px;">
		<div id="footer">
			<p class="pull-right"><a href="#">Back to top</a></p>
			<p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
		</div>
	</div></div>
</div>


<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
  !function ($) {
	$(function(){
	  // carousel demo
	  //$('#myCarousel').carousel()
	})
  }(window.jQuery)
</script>
</body>
</html>
